<template>
  <div>
    <div class="breadcrumb">
      <span class="breadcrumb_left">您的位置：</span>
      <a-breadcrumb class="breadcrumb_right">
        <a-breadcrumb-item ><a href="">java学习吧</a></a-breadcrumb-item>
        <a-breadcrumb-item>{{breadcrumb}}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="">
      <div class="blog_box">
        <div class="blog_title">
          <div class="blog_title_val">{{breadcrumb}}</div>
        </div>
        <div class="spin_box">
          <a-spin size="large" :spinning="spinningLoading"/>
        </div>
        <ul class="blog_list" v-show="!spinningLoading">
          <li v-for="(item, i) in list" :key="i">
            <List :item="item"></List>
          </li>
          <a-empty :description="false" v-show="list.length == 0"/>
          <a-pagination 
            v-model="current" 
            :defaultCurrent="1" 
            :total="total" 
            @change="onChange"/>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import List from "@/components/List";
import { getBlogList, search, tabSearch } from "@/api/blog";
export default {
  components: { List},
  name: "gamePlayer",
  data() {
    return {
      breadcrumb:'',
      list: [],
      //
      current: 1,
      total:10,
      //文章加载
      spinningLoading:false,
    };
  },
  created() {
    this.init(1)
  },
  updated(){
    // this.funBlogList(1)
  },
  watch: {
    '$route' (to, from) {   //监听路由是否变化
      if((to.query.id != from.query.id && to.query.id != null)||(to.query.keywords != from.query.keywords && to.query.keywords != null)){  //pid不为空才请求数据
        this.id = to.query.id;
        this.init(1); //调接口，请求数据
      }else if(to.query.name != from.query.name && to.query.name != null){
        this.init(1); //调接口，请求数据
      } 
    }
  },
  methods: {
    init(pageNo){
      let keywords = this.$route.query.keywords //关键字
      let tagId = this.$route.query.tagId //tag
      let id = this.$route.query.id  //分类
      let name = this.$route.query.name   
      
      if(keywords){
        this.funSearch(keywords,pageNo)
      }else if(tagId){
        this.funTabSearch(tagId,name,pageNo)
      }else{
        this.funBlogList(id,name,pageNo)
      }
    },
    //搜索
    funSearch(keywords,pageNo){
      let that = this;
      that.spinningLoading = true;
      that.breadcrumb = keywords;

      search(keywords).then(
        (res) => {
          let data = res.result;
          that.listVal(data,res.result.total)
        },
        (err) => {
          that.$message.warning("提交失败");
        }
      ).finally(() => {
        this.spinningLoading = false;
      });
    },
    funBlogList(id,name,pageNo){
      let that = this;
      that.spinningLoading = true;
      that.breadcrumb = name;

      if(id && id != 0){
        name = ''
      }else if(name){
        id = ''
      }else{
        that.$message.warning("获取参数错误");
      }
      //
      let param = {
        name:'',
        categoryId:id,
        pageNo:pageNo,
        pageSize:10,
        status: 1,
      }
      getBlogList(param).then(
        (res) => {
          let data = res.result.records;
          that.listVal(data,res.result.total)
        },
        (err) => {
          that.$message.warning("提交失败");
        }
      ).finally(() => {
        this.spinningLoading = false;
      });
    },
    //tab搜索
    funTabSearch(tagId,name,pageNo){
      let that = this;
      that.spinningLoading = true;
      that.breadcrumb = name;

      let param = {
        tagId:tagId,
        pageNo:pageNo,
        pageSize:10
      }
      tabSearch(param).then(
        (res) => {
          let data = res.result.records;
          that.listVal(data,res.result.total)
        },
        (err) => {
          that.$message.warning("提交失败");
        }
      ).finally(() => {
        this.spinningLoading = false;
      });
    },
    //赋值
    listVal(data,total){
      this.list = data.map((obj) => {
        obj = {
          id:obj.id,
          img: obj.img?obj.img:require("@/assets/img/defaultdll.png"),
          title: obj.title,
          time: obj.updateTime,
          browse: obj.browse,
          summary: obj.summary, //摘要
          tags: this.$route.query.name,
          mode:obj.mode,
        } 
        return obj
      })
      this.total = total
    },

    onChange(pageNo, pageSize){
      this.init(pageNo)
    },
  },
};
</script>

<style scoped>
.breadcrumb {
  width: 100%;
  margin: 15px;
  overflow: hidden;
}
.breadcrumb_left {
  float: left;
}
.breadcrumb_right {
  float: left;
}
</style>